<template>
  <div class="search">
    <el-select
      v-model="value"
      filterable
      remote
      :popper-append-to-body="false"
      reserve-keyword
      placeholder="请输入关键词"
      :remote-method="remoteMethod"
      :loading="loading"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button type="primary" @click="search">查询</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [],
      value: [],
      list: [],
      loading: false,
      states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"]
    }
  },
  mounted () {
    this.list = this.states.map(item => {
      return { value: `${item}`, label: `${item}` }
    })
  },
  methods: {
    search () {
      console.log(this.value)
      this.value = ''
    },
    remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.options = []
      }
    }
  }
}
</script>


<style lang='scss' scoped>
.search {
  position: relative;
  margin-top: -20px;
  // height: 100px;
  width: 450px;
  .el-select {
    width: 450px;
    // height: 200px;
  }
  ::v-deep .el-select-dropdown {
    left: 0 !important;
    top: 40px !important;
  }

  ::v-deep .el-input__inner {
    height: 45px !important;
    margin-bottom: 10px;
  }

  .el-button {
    position: absolute;
    right: 3px;
    top: 4px;
    width: 80px;
    padding: 10px;
    height: 35px;
  }
}
</style>
